import React, { PureComponent } from 'react';
import moment from 'moment';
import { Card, Icon, List,Avatar,Button ,Tag,Spin,message} from 'antd';
import ShowImage from '../ShowImage';
import ShowDiscuss from '../ShowDiscuss';
import styles from './index.less';
message.config({
  duration: 1.0,
});
class ShowList extends PureComponent {
  state = {
    reloadDiscuss:false
  };
  /**
   * 删除电台秀评论后调用的方法
   * @param showIndex
   */
  afterDelShowDiscuss = (showIndex) => {
    this.props.afterDelShowDiscuss(showIndex);
  }

  /**
   * 展示电台秀评论
   * @param itemid
   */
  handleShowDiscuss = (itemid,commentCount) => {
    if(commentCount <= 0){
      message.info("当前电台秀没有评论");
      return ;
    }
    var targetTopEm = document.getElementById("discussTopEmId"+itemid) ;
    if (targetTopEm.style.color ===  "transparent" || targetTopEm.style.color ===  "" ){
      targetTopEm.style.color = "#ffffff";
    } else {
      targetTopEm.style.color = "transparent";
    }

    var targetTopDiv = document.getElementById("discussTopDivId"+itemid) ;
    if (targetTopDiv.style.backgroundColor ===  "rgb(240, 242, 245)"){
      targetTopDiv.style.borderColor = "#e8e8e8";
      targetTopDiv.style.backgroundColor = "#ffffff";
    } else {
      targetTopDiv.style.borderColor = "#f0f2f5";
      targetTopDiv.style.backgroundColor = "#f0f2f5";
    }

    var target=document.getElementById("discussDivId"+itemid) ;
    if (target.style.display ===  "inline"){
      target.style.display = "none";
      this.setState({
        reloadDiscuss:false
      });
    } else {
      target.style.display = "inline";
      this.setState({
        reloadDiscuss:true
      });
    }
  }
  /**
   * 展示全文
   * @param itemid
   */
  showMsgAttLongDiv = (recordId) => {
    var msgAttShortDiv =document.getElementById("msgAttShort"+recordId) ;
    var msgAttLongDiv =document.getElementById("msgAttLong"+recordId) ;
    msgAttShortDiv.style.display = "none";
    msgAttLongDiv.style.display = "inline";
  }
  /**
   * 展示摘要
   * @param recordId
   */
  showMsgAttShortDiv = (recordId) => {
    var msgAttShortDiv =document.getElementById("msgAttShort"+recordId) ;
    var msgAttLongDiv =document.getElementById("msgAttLong"+recordId) ;
    msgAttShortDiv.style.display = "inline";
    msgAttLongDiv.style.display = "none";
  }

  /**
   * 显示电台秀附件内容
   * 0 无附件   1 链接   2 照片   3 视屏
   * @param record
   * @returns {XML}
   */
  generateContentDiv = (record) => {
    /*0 无附件*/
    if(record.showAttachmentType == 0){
      if(record.showTxtContent.length < 100){
        return (
          <div style={{marginLeft:12}}>
            {record.showTxtContent}
          </div>
        );
      }else {
        return (
          <div style={{marginLeft:12}}>
            <div id={"msgAttShort"+record.id}>
              {record.showTxtContent.substring(0,100)}...
              <a onClick={() => this.showMsgAttLongDiv(record.id)}>阅读全文<Icon type="down" /></a>
            </div>
            <div id={"msgAttLong"+record.id} style={{display:'none'}}>
              {record.showTxtContent}
              <a onClick={() => this.showMsgAttShortDiv(record.id)}>收起全文<Icon type="up" /></a>
            </div>
          </div>
        );
      }
      /*1 链接*/
    }else if(record.showAttachmentType == 1){
      if(record.showTxtContent.length < 100){
        return (
          <div style={{marginLeft:12}}>
            <div>
              {record.showTxtContent}
            </div>
            <div style={{height:44,background:"#ccc"}}>
              <div style={{float:"left",marginTop:2,marginLeft:2}}>
                <a  href={JSON.parse(record.showAttachment)[0].url} target="_blank">
                  <Avatar shape="square" size="large" icon="disconnect" style={{background:"#ffffff",color:"#52c41a"}} />
                </a>
              </div>
              <div style={{float:"left",lineHeight:"40px",wordBreak:"break-all",marginLeft:4}}>
                <a  href={JSON.parse(record.showAttachment)[0].url} target="_blank">
                  {JSON.parse(record.showAttachment)[0].title}
                </a>
              </div>
            </div>
          </div>
        );
      }else {
        return (
          <div style={{marginLeft:12}}>
            <div id={"msgAttShort"+record.id}>
              {record.showTxtContent.substring(0,100)}...
              <a onClick={() => this.showMsgAttLongDiv(record.id)}>阅读全文<Icon type="down" /></a>
            </div>
            <div id={"msgAttLong"+record.id} style={{display:'none'}}>
              {record.showTxtContent}
              <a onClick={() => this.showMsgAttShortDiv(record.id)}>收起全文<Icon type="up" /></a>
            </div>
            <div style={{height:44,background:"#ccc"}}>
              <div style={{float:"left",marginTop:2,marginLeft:2}}>
                <a  href={JSON.parse(record.showAttachment)[0].url} target="_blank">
                  <Avatar shape="square" size="large" icon="disconnect" style={{background:"#ffffff",color:"#52c41a"}} />
                </a>
              </div>
              <div style={{float:"left",lineHeight:"40px",wordBreak:"break-all",marginLeft:4}}>
                <a  href={JSON.parse(record.showAttachment)[0].url} target="_blank">
                {JSON.parse(record.showAttachment)[0].title}
                </a>
              </div>
            </div>
          </div>
        );
      }
      /*2 照片*/
    } else if(record.showAttachmentType == 2){
      if (record.showTxtContent.length < 100) {
        return (
          <div style={{marginLeft: 12}}>
            <div>
              {record.showTxtContent}
            </div>
            <ShowImage
              imageSrc={JSON.parse(record.showAttachment)}
              imageId={record.id}
            />
          </div>
        );
      } else {
        return (
          <div style={{marginLeft: 12}}>
            <div>
              <div id={"msgAttShort" + record.id}>
                {record.showTxtContent.substring(0, 100)}...
                <a onClick={() => this.showMsgAttLongDiv(record.id)}>阅读全文<Icon type="down" /></a>
              </div>
              <div id={"msgAttLong" + record.id} style={{display: 'none'}}>
                {record.showTxtContent}
                <a onClick={() => this.showMsgAttShortDiv(record.id)}>收起全文<Icon type="up" /></a>
              </div>
            </div>
            <ShowImage
              imageSrc={JSON.parse(record.showAttachment)}
              imageId={record.id}
            />
          </div>
        );
      }
      /*3 视屏*/
    }else if(record.showAttachmentType == 3){
      if (record.showTxtContent.length < 100) {
        return (
          <div style={{marginLeft: 12}}>
            <div>
              {record.showTxtContent}
            </div>
            <div>
              <video controls="controls" style={{width: 512, height: 488}}>
                <source src={JSON.parse(record.showAttachment)[0].src} type="video/mp4"/>
                您的浏览器不支持 video 标签。
              </video>
            </div>
          </div>
        );
      } else {
        return (
          <div style={{marginLeft: 12}}>
            <div>
              <div id={"msgAttShort" + record.id}>
                {record.showTxtContent.substring(0, 100)}...
                <a onClick={() => this.showMsgAttLongDiv(record.id)}>阅读全文<Icon type="down" /></a>
              </div>
              <div id={"msgAttLong" + record.id} style={{display: 'none'}}>
                {record.showTxtContent}
                <a onClick={() => this.showMsgAttShortDiv(record.id)}>收起全文<Icon type="up" /></a>
              </div>
            </div>
            <div>
              <video controls="controls" style={{width: 512, height: 488}}>
                <source src={JSON.parse(record.showAttachment)[0].src} type="video/mp4"/>
                您的浏览器不支持 video 标签。
              </video>
            </div>
          </div>
        );
      }
    }
  }


  render() {
    const { loading,loadingMore,showLoadingMore,data} = this.props;
    const {reloadDiscuss} = this.state;
    const loadMore = showLoadingMore ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
        {loadingMore && <Spin />}
        {!loadingMore && <Button onClick={() => this.props.onLoadMore() }>加载更多....</Button>}
      </div>
    ) : null;
    return (
      <div >
        <List
          rowKey="id"
          className={styles.showListCard}
          loading={loading}
          loadMore={loadMore}
          itemLayout="vertical"
          grid={{ lg: 1, md: 1, sm: 1, xs: 1 }}
          dataSource={data}
          renderItem={(item,index) => (
            <List.Item key={item.id}>
              <Card className={styles.card} actions={[<a><Icon type="star-o" />{item.favoriteCount > 0 ? item.favoriteCount : "收藏"}</a>,

                      <a onClick={()=> this.handleShowDiscuss(item.id,item.commentCount)}><Icon type="message" />  {item.commentCount > 0 ? item.commentCount : "评论"}<em className={styles.discussTriangle}  id={"discussTopEmId"+item.id}></em></a>,
                       <a><Icon type="like-o" /> {item.likeCount > 0 ? item.likeCount : "点赞"}</a>]}>
                <Card.Meta
                  avatar={<img alt="" className={styles.cardAvatar} src={item.rsLogo} />}
                  title={
                    <div>
                      <div style={{float:"left"}}>
                        <a href="#">{item.rsName}</a>
                      </div>
                      <div style={{float:"left",marginLeft:5,wordBreak:"break-all"}}>
                        {item.showLables == null ? "" :  <Tag color={item.showLables.split(",")[1]}>{item.showLables.split(",")[0]}</Tag> }
                      </div>
                      <div style={{float:"right",marginRight:5}}>
                        <Button type="danger" size="small" onClick={() => this.props.handleDelRadioStationShow(item.id,index)}>删除</Button>
                      </div>
                    </div>
                  }
                  description={
                    <div>
                      <div>
                        <a style={{color:'#808080',fontSize:12 }}>{moment(item.showPbTime).format('YYYY-MM-DD HH:mm:ss')}</a> 来自<a  style={{color:'#808080',fontSize:12}}> {item.pbUserName}</a>
                      </div>
                      <div style={{color:'#333',fontSize:14,marginTop:10 }}>
                        {this.generateContentDiv(item)}
                      </div>
                    </div>
                  }
                />
              </Card>
              <div style={{height:20,backgroundColor:"#f0f2f5",borderColor:"#f0f2f5",borderStyle:'solid',borderWidth:1,borderBottom:'none'}} id={"discussTopDivId"+item.id}></div>
              <div style={{ display:'none'}} id={"discussDivId"+item.id}>
                <ShowDiscuss
                    showId={item.id}
                    showIndex={index}
                    reloadDiscuss={reloadDiscuss}
                    afterDelShowDiscuss={(showIndex)=>this.afterDelShowDiscuss(showIndex)}
                    showReviewPermissions={item.showReviewPermissions}
                />
              </div>
            </List.Item>
          )}
        />
      </div>
    );
  }
}

export default ShowList;
